<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.js"></script>
</head>

<body>

</body>
<script>
    //1.ajax(异步无刷新请求网页)原理 注意服务器运行ajax
    // let xhr = new XMLHttpRequest()
    // console.log("xhr属性与方法", xhr)
    // xhr.open('get', 'abc', 'txt', true)
    // xhr.send()
    // xhr.onreadystatechange = function () {
    //     console.log(xhr.readyState) //发送状态码
    //     if (xhr.readyState == 4) {
    //         console.log(xhr.status)
    //         if (xhr.status == 200) {
    //             console.log(xhr.responseText)
    //         } else {
    //             console.log(xhr.status)

    //         }
    //     }
    // }

    //2.jq中使用ajax
    // $.ajax({
    //     url: "abc.txt",
    //     method: 'get',
    //     success: function (res) {
    //         console.log('请求成功', res)
    //     },
    //     error: function (err) {
    //         console.log('请求失败', res)
    //     }
    // })


    //3.封装ajax
    function ListAjax(methond,url,fnSun) {
        let xhr = new XMLHttpRequest()
        console.log("xhr属性与方法", xhr)
        xhr.open(methond,url, true)
        xhr.send()
        xhr.onreadystatechange = function () {
            // console.log(xhr.readyState) //发送状态码
            if (xhr.readyState == 4) {
                console.log(xhr.status)
                if (xhr.status == 200) {
                    // console.log('请求成功结果',xhr.responseText)
                    fnSun(xhr.responseText)
                } else {
                    // console.log('请求失败结果',xhr.status)
                    fnSun(xhr.status)

                }
            }
        }
    }

    ListAjax('get','abc.txt',function(res){
        console.log('请求成功结果',res)
    },function(err){
        console.log("请求失败结果",err)
    })






</script>

</html>